<template>
  <div id="warp-tow">
    <div class="time">填报时间：2020-09-24</div>
    <div class="one">
      <h1>二、孵化器投资构成</h1>
    </div>
    <!-- <div class="warp-name-input"> -->

    <div class="unit-name">
      <p class="char">财政投资</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>{{ a }}&nbsp;&nbsp;</p>
        <span class="session-blu">{{ b }}</span>
        <span class="session-span">下降：</span>
        <h6>{{ percentage }}</h6>
      </div>
      <a-input placeholder="78" class="unit-input"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">企业投资</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>{{ a }}&nbsp;&nbsp;</p>
        <span class="session-blu">{{ b }}</span>
        <span class="session-span">下降：</span>
        <h6>{{ percentage }}</h6>
      </div>
      <a-input placeholder="2" class="unit-input"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">社会组织投资</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>{{ a }}&nbsp;&nbsp;</p>
        <span class="session-blu">{{ b }}</span>
        <span class="session-span">下降：</span>
        <h6>{{ percentage }}</h6>
      </div>
      <a-input placeholder="1" class="unit-input"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">其他投资</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p >&nbsp;&nbsp;{{abc === '' ? this.default : (abc / 10).toFixed(2)}}</p>
        <span class="session-blu">{{ b }}</span>
        <span class="session-span">下降：</span>
        <h6>{{ percentage }}</h6>
      </div>
      <a-input placeholder="4" class="unit-input" v-model="abc"></a-input>
    </div>

    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      session: "21",
      abc: "",
      a: "",
      b: "0",
      percentage: "0%",
      default:'4'
    };
  },
  mathods:{
    // changeNum(){
      // if()
    // }
  }
  
};
</script>

<style lang="scss" scoped>
#warp-tow {
  .time {
    font-size: 16px;
    color: #2ccce4;
    margin-bottom: 20px;
  }
  .one {
    font-size: 16px;
    color: #000;
  }
  .warp-name-input {
    width: 600px;
  }
  .unit-name {
    height: 50px;
    width: 900px;
    background: rgb(231, 228, 228);
    margin-top: 10px;
    overflow: hidden;
    .char {
      line-height: 50px;
      margin-left: 50px;
      float: left;
      font-size: 16px;
      color: #000;
    }
    .unit-input {
      margin-top: 10px;
      margin-right: 50px;
      float: right;
      width: 300px;
      border: ceil($number: 0);
    }
    .icon-circle {
      float: left;
      line-height: 53px;
      margin-left: 20px;
    }
    .session {
      float: right;
      .session-span {
        color: #000;
      }
      p {
        display: inline;
        line-height: 50px;
        color: red;
      }
      .session-blu {
        color: blue;
      }
      h6 {
        display: inline;
        line-height: 50px;
        color: red;
        margin-right: 40px;
      }
    }
  }
}
</style>